<template>
  <div class="content">
    <div class="banner linear-bg-blue"></div>
    <scroll-view
      class="scroll-wrap no-scroll-bar scroll-list"
      style="height:calc(100% - 0px)"
      scroll-y
      @scrolltolower="handleLoadMore"
    >
      <!-- 差评提醒 -->
      <div v-if="key === 'ASSESS'">
        <div class="listClass1" v-for="(item,index) in list" :key="index">
          <div class="div">
            <div class="title">
              <span>{{item.content}}</span>
              <p>{{item.createDate}}</p>
            </div>
            <div class="cont">
              <img :src="item.goodsImg" mode="scaleToFill" class="contImg" />
              <div class="left">
                <div class="top">
                  <span>{{item.goodsName}}</span>
                  <p>{{item.content2}}</p>
                </div>
                <div class="bottom">
                  <i-rate :value="item.goodsAssess" :disabled="true" />
                  <p>{{item.username}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单提醒 -->
      <div v-if="key === 'ORDER'">
        <div class="listClass2" v-for="(item,index) in list" :key="index">
          <div class="div">
            <div class="title">
              <span>{{item.content}}</span>
              <p>{{item.createDate}}</p>
            </div>
            <div class="cont">
              <p class="relateIdClass">订单号：{{item.relateId}}</p>
              <p class="relateIdClass2">收货人：{{item.realName}}</p>
              <p class="relateIdClass3">
                订单金额：
                <span>{{item.discount}}元</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品库存不在 -->
      <div v-if="key === 'STOCK'">
        <div class="listClass3" v-for="(item,index) in list" :key="index">
          <div class="div">
            <div class="title">
              <span>{{item.content}}</span>
            </div>
            <div class="cont">
              <img :src="item.goodsImg" mode="scaleToFill" class="contImg" />
              <div class="contentInfo">
                <p class="info1">{{item.goodsName}}</p>
                <p class="info2">
                  <span>￥{{item.goodsDiscount}}</span>
                  <label>原价:￥{{item.goodsAmount}}</label>
                </p>
                <div class="info3">
                  <p>
                    库存
                    <span>{{item.goodsStock}}</span>
                  </p>
                  <label>{{item.createDateInfo}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 短信余量不足提醒 -->
      <div v-if="key === 'REBATE'">
        <div class="listClass5" v-for="(item,index) in list" :key="index">
          <div class="div">
            <div class="title">
              <span>{{item.content}}</span>
            </div>
            <div class="cont">
              <p class="relateIdClass">返佣金额：{{item.amount}}</p>
              <div class="newRelateIdClass">
                <span>返佣点数：{{item.point}}</span>
                <button
                  class="btn-color-blue btn"
                  size="mini"
                  @click="findInfoClick"
                >查看详情</button>
              </div>
              <p class="relateIdClass2">{{item.createDateInfo}}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 短信余量不足提醒 -->
      <div v-if="key === 'MESSAGE'">
        <div class="listClass6" v-for="(item,index) in list" :key="index">
          <div class="div">
            <div class="title">
              <span>{{item.content}}</span>
            </div>
            <div class="cont">
              <p class="relateIdClass">短信余量：{{item.num}}</p>
              <p class="relateIdClass2">{{item.createDateInfo}}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 线下收款 -->
      <div v-if="key === 'OFFLINE'">
        <div class="listClass7" v-for="(item,index) in list" :key="index">
          <div class="div">
            <div class="title">
              <span>{{item.content}}</span>
              <p>{{item.createDate}}</p>
            </div>
            <div class="cont">
              <p>订单号：{{item.relateId}}</p>
              <!-- <span>订单金额：{{item.relateId}}</span> -->
              <span>订单金额：{{item.discount}}元</span>
            </div>
          </div>
        </div>
      </div>

      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_MESSAGE_MOTIFY_PAGE_API,
  FIND_ORDER_NO_INFO,
  ASSESS_FIND_INFO_API,
  FIND_SHOP_GOODS_INFO,
  FIND_STORE_MESSAGE_INFO,
  FIND_SHOP_REBATE_PAGE
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      key: '',
      currentPage: 1,
      list: [],
      alreadyLastPage: false,
      test: [
        {
          content: '您有新的订单，用户已支付0.0元，请及时处理',
          createDate: '2019-05-21 15:37:04',
          id: 306,
          isRead: 'N',
          msgType: 'ORDER',
          relateId: '315513259245436928',
          shopId: '56',
          createDateInfo: '2019-05-21 15:37:04',
          num: 20
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
    this._findMessageMotifyPageApi()
  },
  methods: {
    formatMoney (amount) {
      return (amount * 0.01).toFixed(2)
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findMessageMotifyPageApi()
      }
    },
    findInfoClick () {
      this.$router.push(`/pages/mine/balance/main?isRebate=1`)
    },
    _findMessageMotifyPageApi () {
      const vm = this
      let params = {
        msgType: vm.$root.$mp.query.key,
        shopId: vm.$cookie.get('account').shopId
      }
      FIND_MESSAGE_MOTIFY_PAGE_API(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },

    printList (list, isFirst, isLast) {
      const vm = this

      if (vm.key === 'ASSESS') {
        list = list.map(_ => {
          ASSESS_FIND_INFO_API(_.relateId)
            .then(r => {
              if (r.data.code === '0') {
                console.log(r.data.data)
                let {
                  avatar,
                  content,
                  goodsAssess,
                  username,
                  goodsNo
                } = r.data.data[0]
                let len = username.length - 1
                let xing = ''
                for (let i = 0; i < len; i++) {
                  xing += '*'
                }
                _.avatar = avatar
                _.content2 = content
                _.goodsAssess = goodsAssess
                _.username = username.substr(0, 1) + xing
                _.goodsNo = goodsNo

                FIND_SHOP_GOODS_INFO(_.goodsNo)
                  .then(r => {
                    if (r.data.code === '0') {
                      let { goodsName, goodsImg } = r.data.data
                      _.goodsName = goodsName
                      _.goodsImg = goodsImg
                    } else {
                      vm.$toast(r.data.message)
                    }
                  })
                  .catch(e => {
                    console.info(e)
                  })
              } else {
                vm.$toast(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })
          _.avatar = ''
          _.content2 = ''
          _.goodsAssess = ''
          _.username = ''
          _.goodsNo = ''
          _.goodsName = ''
          return _
        })
      } else if (vm.key === 'ORDER' || vm.key === 'OFFLINE') {
        list = list.map(_ => {
          FIND_ORDER_NO_INFO(_.relateId)
            .then(r => {
              if (r.data.code === '0') {
                let { realName, discount } = r.data.data
                if (realName) {
                  let len = realName.length - 1
                  let xing = ''
                  for (let i = 0; i < len; i++) {
                    xing += '*'
                  }
                  _.realName = realName.substr(0, 1) + xing
                } else {
                  _.realName = '无'
                }
                _.discount = discount
              } else {
                vm.$toast(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })

          _.discount = 0
          _.realName = ''
          return _
        })
      } else if (vm.key === 'STOCK') {
        list = list.map(_ => {
          FIND_SHOP_GOODS_INFO(_.relateId)
            .then(r => {
              if (r.data.code === '0') {
                let {
                  goodsImg,
                  goodsName,
                  createDate,
                  goodsAmount,
                  goodsDiscount,
                  goodsStock
                } = r.data.data
                _.goodsImg = goodsImg
                _.goodsName = goodsName
                _.createDateInfo = createDate
                _.goodsAmount = goodsAmount // 原价
                _.goodsDiscount = goodsDiscount // 折扣价
                _.goodsStock = goodsStock // 库存
              } else {
                vm.$toast(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })

          _.goodsImg = ''
          _.goodsName = ''
          _.createDateInfo = ''
          _.goodsAmount = 0
          _.goodsDiscount = 0
          _.goodsStock = 0
          return _
        })
      } else if (vm.key === 'REBATE') {
        let rebateList = []
        list.forEach(_ => {
          // if (_.relateId) {
          rebateList.push(_)
          // }
        })
        list = rebateList.map(_ => {
          let params = { transNo: _.relateId }
          FIND_SHOP_REBATE_PAGE(params)
            .then(r => {
              if (r.data.code === '0') {
                let { amount, point, createDate } = r.data.data.list[0]
                _.amount = _.relateId ? vm.formatMoney(amount) : '-'
                _.point = _.relateId ? point : '-'
                _.createDateInfo = _.relateId ? createDate : _.createDate
              } else {
                vm.$toast(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })

          _.amount = 0
          _.point = 0
          _.createDateInfo = ''
          return _
        })
      } else if (vm.key === 'MESSAGE') {
        list = list.map(_ => {
          FIND_STORE_MESSAGE_INFO(_.relateId)
            .then(r => {
              if (r.data.code === '0') {
                let { num, createDate } = r.data.data
                _.num = num
                _.createDateInfo = createDate
              } else {
                vm.$toast(r.data.message)
              }
            })
            .catch(e => {
              console.info(e)
            })

          _.num = 0
          _.createDateInfo = ''
          return _
        })
      }

      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.list.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    init () {
      this.currentPage = 1
      this.list = []
      this.alreadyLastPage = false
      this.key = this.$root.$mp.query.key
      let title = '通知'
      if (this.key === 'ASSESS') {
        title = '评价消息'
      } else if (this.key === 'ORDER') {
        title = '订单消息'
      } else if (this.key === 'STOCK') {
        title = '库存消息'
      } else if (this.key === 'SYSTEM') {
        title = '系统消息'
      } else if (this.key === 'REBATE') {
        title = '返佣提醒'
      } else if (this.key === 'MESSAGE') {
        title = '短信消息'
      } else if (this.key === 'OFFLINE') {
        title = '线下收款'
      } else {
        title = '通知'
      }
      wx.setNavigationBarTitle({
        title: title
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #edf0f5;
  .banner {
    height: 130px;
    width: 100%;
    position: fixed;
    top: 0;
  }
  .scroll-list {
    margin-top: 65px;
    .listClass1 {
      width: 90%;
      min-height: 130px;
      margin: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 30px;
      .div {
        width: 95%;
        margin: auto;
        .title {
          min-height: 35px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // line-height: 35px;
          border-bottom: 1px solid #d9d9d9;
          span {
            width: 60%;
            color: #6692ff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
          }
          p {
            width: 40%;
            color: #a6a6a6;
            display: flex;
            justify-content: flex-end;
          }
        }
        .cont {
          height: 95px;
          display: flex;
          align-items: center;
          .contImg {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            margin-right: 10px;
          }
          .left {
            height: 95px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .top {
              span {
                font-size: 14px;
                color: #000;
              }
              p {
                color: #666;
                font-size: 14px;
                width: 250px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .bottom {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
    }
    .listClass2 {
      width: 90%;
      min-height: 130px;
      margin: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 30px;
      .div {
        width: 95%;
        margin: auto;
        .title {
          min-height: 35px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // line-height: 35px;
          border-bottom: 1px solid #d9d9d9;
          span {
            width: 60%;
            color: #6692ff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
          }
          p {
            width: 40%;
            color: #a6a6a6;
            display: flex;
            justify-content: flex-end;
          }
        }
        .cont {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 95px;
          font-size: 14px;
          .relateIdClass {
            color: #000;
            margin-top: 8px;
          }
          .relateIdClass2 {
            color: #9b9b9b;
          }
          .relateIdClass3 {
            color: #9b9b9b;
            margin-bottom: 8px;
            span {
              color: #f82020;
            }
          }
        }
      }
    }

    .listClass3 {
      width: 90%;
      min-height: 130px;
      margin: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 30px;
      .div {
        width: 95%;
        margin: auto;
        .title {
          min-height: 35px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #d9d9d9;
          span {
            width: 100%;
            color: #6692ff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .cont {
          height: 95px;
          display: flex;
          align-items: center;
          .contImg {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            margin-right: 10px;
          }
          .contentInfo {
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #000;
            .info1 {
              font-size: 16px;
            }
            .info2 {
              display: flex;
              span {
                font-size: 16px;
              }
              label {
                font-size: 14px;
                color: #666;
                margin-left: 12px;
              }
            }
            .info3 {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #666;
              p {
                font-size: 14px;
                span {
                  color: #ff1515;
                }
              }
              label {
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .listClass5 {
      width: 90%;
      min-height: 130px;
      margin: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 30px;
      .div {
        width: 95%;
        margin: auto;
        .title {
          min-height: 35px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #d9d9d9;
          span {
            width: 100%;
            color: #6692ff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .cont {
          height: 95px;
          .newRelateIdClass {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 16px;
              color: #000;
              line-height: 25px;
            }
            .btn {
              height: 20px;
              width: 100px;
              font-size: 14px;
              line-height: 20px;
              padding: 0;
              margin: 0;
            }
          }
          .relateIdClass2 {
            font-size: 12px;
            color: #666;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }

    .listClass6 {
      width: 90%;
      min-height: 130px;
      margin: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 30px;
      .div {
        width: 95%;
        margin: auto;
        .title {
          min-height: 35px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #d9d9d9;
          span {
            width: 100%;
            color: #6692ff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .cont {
          height: 95px;
          .relateIdClass {
            font-size: 18px;
            color: #000;
            line-height: 60px;
          }
          .relateIdClass2 {
            font-size: 12px;
            color: #666;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }

    .listClass7 {
      width: 90%;
      min-height: 130px;
      margin: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 30px;
      .div {
        width: 95%;
        margin: auto;
        .title {
          min-height: 35px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #d9d9d9;
          span {
            width: 60%;
            color: #6692ff;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
          }
          p {
            width: 40%;
            color: #a6a6a6;
            display: flex;
            justify-content: flex-end;
          }
        }
        .cont {
          height: 95px;
          font-size: 14px;
          p {
            color: #000;
            margin: 20px 0;
          }
          span {
            color: #a6a6a6;
          }
        }
      }
    }

    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
